<template>
  <view class="item_box_2">
    <view class="item_contain">
      <view class="tick-content">
        <view class="tick_h">
          <view class="tick_header">
            <view class="test">
              <image src="@/assets/images/orderTracking/icon_jijiandan.png"></image>
              <view class="text">承运单号：{{ item.billNo || '暂未生成' }}</view>
            </view>
          </view>
          <view class="tick_address">
            <image src="@/assets/images/orderTracking/kapian_icon_fahuodi.png"></image>
            <view class="text">{{ item.shipper }}</view>
            <view class="text1">{{ item.toProvince }}{{ item.toFromCity }}</view>
          </view>
          <view class="tick_address">
            <image src="@/assets/images/orderTracking/icon_shoujiandan.png"></image>
            <view class="text">{{ item.receiver }}</view>
            <view class="text1">{{ item.fromProvince }}{{ item.fromCity }}</view>
          </view>
          <view class="tick_goods">
            <view class="goods_pickup_d" v-for="(gInfo, index) in item.goodsInfo">
              <view class="goods_number_text">
                <text>{{ gInfo.goodsName }}</text>
                <text class="subs">（取{{ gInfo.number}}/剩{{ gInfo.goodsNumber-gInfo.upNumber - gInfo.number }}件） </text>
                <text>{{ goodsInfoString(gInfo) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tick-foot">
        <view class="tick_foot_left">合计</view>
        <view class="tick_foot_right" @click="checkDetail">
          <text>¥{{ pendingPrice }}</text>
          <IconFont name="rect-up" size="20rpx" v-if="!item.show"></IconFont>
          <IconFont name="rect-down" size="20rpx" v-if="item.show"></IconFont>
        </view>
      </view>
      <view class="prices" v-show="item.show">
        <view class="price_row" v-for="(cost, i) in item.costList" :key="i">
          <view class="price_left">{{ cost.ssopRemark }}</view>
          <view class="price_right">¥{{ (cost.actualMoney - cost.paidMoney).toFixed(2) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import { computed, defineEmits, ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";

const props = defineProps<{
  item: any;
}>();
const item = ref({
  ...props.item,
  show: false
})

const pendingPrice = computed(() => {
  let p = 0
  item.value.costList.forEach((cost) => {
    p = p + (cost.actualMoney - cost.paidMoney)
  })
  return p.toFixed(2)
})
const emit = defineEmits([])


const checkDetail = () => {
  item.value.show = !item.value.show
}

function goodsInfoString(item) {
  let goods = "";
    goods =
      item.weigh +
      "Kg, " +
      item.goodsVolume +
      "m³, " +
      item.packing +
      ";";
  return goods;
}

</script>

<style lang="scss">
.item_box_2 {
  width: 700rpx;
  display: flex;
  justify-content: space-between;
  margin-left: 25rpx;
  margin-top: 16rpx;
  background-color: #fff;
  border-radius: 16rpx;

  .item_contain {
    width: 100%;

    .tick_h {
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .tick_header {
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .test {
          display: flex;
          align-items: center;

          image {
            width: 24rpx;
            height: 24rpx;
          }

          .text {
            font-family: PingFang SC;
            font-size: 22rpx;
            margin-left: 24rpx;
            color: #252525;
          }
        }

        .status_active {
          background: rgba(9, 102, 255, 0.16) !important;
          color: #0966ff !important;
        }

        .right {
          width: 96rpx;
          height: 40rpx;
          border-radius: 8rpx;
          background: rgba(255, 143, 31, 0.16);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-size: 24rpx;
          color: #ff8f1f;
        }
      }

      .tick_address {
        width: 100%;
        height: 40rpx;

        margin-top: 24rpx;
        display: flex;
        align-items: center;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 700;
        color: #252525;

        image {
          width: 40rpx;
          height: 40rpx;
        }

        .text {
          margin-left: 24rpx;
        }

        .text1 {
          margin-left: 24rpx;
        }
      }

      .tick_goods {
        width: 100%;
        height: auto;
        border-radius: 8px;
        background: #f5f5f5;
        margin-top: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;

        .goods_pickup_d {
          border-top: 1rpx solid #f5f5f5;
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .goods_number_text {
            color: #252525;
            font-size: 26rpx;

            .subs {
              color: #0966ff;
            }
          }

          &:first-child {
            border: none;
          }
        }

      }
    }

    .tick-foot {
      width: 100%;
      height: 90rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 24rpx;
      font-size: 28rpx;
      color: #0966ff;

      .tick_foot_left {}

      .tick_foot_right {
        display: flex;
        align-items: center;

        text {
          margin-right: 12rpx;
        }
      }
    }

    .prices {
      width: 100%;
      box-sizing: border-box;
      padding: 0 24rpx;

      >.price_row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 22rpx;
        line-height: 28rpx;
        margin-bottom: 12rpx;

        .price_left {
          color: #666;
        }

        .price_right {
          color: #252525;
        }
      }
    }

    .blue {
      color: #0966ff !important;
    }

    .red {
      color: #fa5151 !important;
    }

    .yellow {
      color: #ff8a00 !important;
    }

    .btn_zf {
      font-size: 24rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 144rpx;
      height: 56rpx;
      border: 1rpx solid #0966ff;
      border-radius: 72rpx;
      white-space: nowrap;
      color: #0966ff;
      background-color: #fff;
    }

    .tick-content {
      height: 345rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx;
    }

    .tick-content-two {
      margin-left: 10rpx;
      width: 93%;
    }

    .tick-content-three {
      margin-left: 10rpx;
      width: 93%;
      height: 60rpx;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
    }

    .tick-content-one {
      margin-left: 10rpx;
      width: 93%;
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 100rpx;
      margin-bottom: 10rpx;

      .tick-content-one-text {
        width: 150rpx;
        height: 70rpx;

        .zhuantai {
          width: 150rpx;
          line-height: 70rpx;
          height: 24rpx;
          font-size: 30rpx;
          font-weight: bold;
          text-align: center;

          image {
            height: 10rpx;
            width: 160rpx;
          }
        }

        .tick-content-one-text-top {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 30rpx;
          font-weight: bold;
          white-space: nowrap;
        }

        .tick-content-one-text-bottom {
          width: 100%;
          height: 35rpx;
          line-height: 50rpx;
          font-size: 20rpx;
          color: #999999;
        }
      }
    }

    .orderList {
      box-sizing: border-box;
      background: white;
      margin-bottom: 16rpx;
      border-radius: 16rpx;

      margin-top: 24rpx;
    }
  }
}</style>
